<div class="row-content am-cf">

    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div style="background-color: #ffffff" id="app" v-cloak>
                    <div class="preview" style="padding:0 30px">
                        <div class="widget-head am-cf" style="display:flex;">
                           
                            <div class="widget-title am-fl" style="line-height:3rem;">查看问卷模板</div>
                            <a href="<?= url('question_cate/index') ?>"
                                class="  ml-10  bg-green-300 px-2 py-2  rounded-lg">返回
                             </a>

                        </div>
                        <div style="margin:10px auto;text-align:center;color:#00d297;"><h2>{{title}}</h2></div>
                        <div style="margin:10px auto;color:#333333;"><pre style="word-break: break-all;word-wrap: break-word">{{header_note}}</pre>
                        </div>
                        <!-- <el-divider></el-divider> -->
                        <!-- <el-descriptions class="margin-top" :column="3" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-data-board"></i>
                                    及格分数
                                </template>
                                {{pass_mark}}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-data-line"></i>
                                    满分
                                </template>
                                {{full_mark}}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-view"></i>
                                    显示模式
                                </template>
                                {{mode[show_mode]}}
                            </el-descriptions-item>
                        </el-descriptions> -->
                        <el-divider></el-divider>
                        <?php
                        $jumpShow = []; //每个跳题都控制每一道题，当所有跳题都不隐藏
                        $question = [];
     
                        $qModel['format'] = json_decode($qModel['format'],true);
                        foreach ($qModel['format'] as $k => $v) {
                            array_push($jumpShow, true);
                            switch ($v['type']) {
                                case 0:
                                case 3:
                                case 5:
                                case 6:
                                    array_push($question, null);
                                    break;
                                case 1:
                                case 2:
                                case 4:
                                    array_push($question, []);
                                    break;

                            }
                        }
                        ?>
                        <div v-show="jumpShow[index]" v-for="(item3,index) in format" :key="item3.title">
                            <h1>{{index + 1}}.{{item3.name}}({{questionTypeName[item3.type]}})({{item3.necessary?"必做":"选做"}})</h1>
                            <div class="px-20 ">

                                <span style="font-size:16px;margin:20px 10px;color:#00aeff;"
                                      v-if="item3.note">(提示：{{ item3.note }}）</span>
                                <div v-if="item3.type==0" style="margin:10px 0;">
                                    <el-radio :value="item4" v-model="question[index]" :label="item4"
                                              v-for="(item4,index4) in item3.option" border size="medium"
                                    >{{item4}}<span v-if="item3.other_option==index4">________</span>
                                    </el-radio>

                                </div>
                                <div v-if="item3.type==1" style="margin:0 0 10px 0;">
                                    <el-checkbox :value="item4" v-model="question[index][index4]" border
                                                 v-for="(item4,index4) in item3.option" size="medium">
                                        {{item4}}<span
                                                v-if="item3.other_option==index4">________</span></el-checkbox>
                                </div>
                                <div v-if="item3.type==2" style="margin:10px 0;">
                                    <i v-for="(item5,index4) in item3.text_list" style="margin:10px 0;display:inline-block;"><i
                                                v-if="item5!='$'"
                                                style="font-size:18px;font-style: normal;">{{item5}}</i>
                                        <textarea
                                                 v-model="question[index][index4]"
                                                v-if="item5=='$'"
                                                 wrap="off"
                                                style="width:auto;border:solid 1px #f00; border-radius:20px;padding: 0 5px;height:2em;border;margin:0 15px 0 10px;font-style: normal;">
                                        </textarea>
                                    </i>
                                </div>
                                <div v-if="item3.type==3" style="margin:10px 0;">
                                    <el-row :gutter="0">
                                        <el-col :span="6">
                                            <el-input placeholder="请输入内容"  v-model="question[index]" ></el-input>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div v-if="item3.type==4" style="margin:10px 0;" class="select-preview">
                                    <el-row>
                                        <el-col :span="20">
                                            <el-row :gutter="0"
                                                    style="background-color:#d7d7d7;text-align:center;padding:20px;border-radius:5px 5px 0 0;">
                                                <el-col :span="spanLength(item3.option.length)">选项</el-col>
                                                <el-col :span="spanLength(item3.option.length)"
                                                        v-for="item7 in item3.option">{{item7}}
                                                </el-col>
                                            </el-row>
                                            <el-row :gutter="0" v-for="(item5,index5) in item3.title_list"
                                                    style="padding:20px;text-align:center;border:1px solid #d7d7d7">
                                                <el-col :span="spanLength(item3.option.length)">{{item5}}</el-col>
                                                <el-col :span="spanLength(item3.option.length)"
                                                        v-for="(item7,index3) in item3.option">
                                                    <el-radio  :value="index3+item7" v-model="question[index][index5]" :label="index3+item7">&nbsp;</el-radio>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div v-if="item3.type==5" style="margin:10px 0;">
                                    <el-radio :value="item4" v-model="question[index]" :label="item4" v-for="item4 in item3.option" border size="medium">
                                        {{item4}}
                                    </el-radio>
                                </div>
                                <div v-if="item3.type == 6" style="margin: 20px 0">
                                    <el-radio
                                            :label="item4"
                                            :value="item4"
                                            v-model="question[index]"
                                            v-for="(item4, index4) in item3.option"
                                            border
                                            size="medium"
                                            @change="jumpSelect(parseInt(index),parseInt(item3.jump[index4]+1))"
                                    >{{ item4
                                        }} ({{(parseInt(item3.jump[index4]+ 1)==parseInt(index)+2)?"不跳转":"选择此项将会跳转第"+(item3.jump[index4] + 1)+"题"}})
                                    </el-radio
                                    >
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="__CDN__/assets/js/vue.min.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="__CDN__/assets/css/element-ui-2.15.13.css">
<!-- 引入组件库 -->
<script src="__CDN__/assets/js/element-ui.2.15.13.js"></script>
<link rel="stylesheet" href="__CDN__/assets/css/tailwind.css" type="text/css">

<script>


    new Vue({
        el: '#app',
        data() {
            return {
                format: <?= json_encode($qModel['format'])?>,
                questionTypeName: <?=json_encode($questionTypeName) ?>,
                available: <?= ($qModel['available']) ? 'true' : 'false' ?>,
                full_mark: <?= (int)($qModel['full_mark']) ?>,
                pass_mark: <?= (int)($qModel['pass_mark']) ?>,
                title: "<?= ($qModel['name']) ?>",
                show_mode: <?= (int)($qModel['show_mode']) ?>,
                header_note: `<?= ($qModel['header_note']) ?>`,
                q_class_id: <?=$qModel['q_class_id']?>,
                class1: <?= json_encode($class)?>,
                mode: <?=json_encode($mode) ?>,
                jumpShow: <?=json_encode($jumpShow) ?>,
                question: <?=json_encode($question) ?>,
                oldQuestion:<?=json_encode($question) ?>
            }
        },
        computed: {
            spanLength() {
                return function (length) {
                    return Math.floor(24 / (length + 1))
                };
            }, type() {
                for (let i = 0; i < this.class1.length; i++) {
                    if (this.class1[i].q_class_id == this.q_class_id) {
                        return this.class1[i].name
                    }
                }
                return '暂未选择分类'
            }
        }
        , created() {
        },
        methods:{
            jumpSelect:function (index,select){
                console.log(this.format)
                //拿到上一次选项的值
                var oldSelect = this.oldQuestion[index];
                //中间的折叠起来
                var i=index+1;
                for(;i<oldSelect-1;i++){
                    this.jumpShow[i]=true;
                }
                i=index+1;
                for(;i<select-1;i++){
                    this.jumpShow[i]=false;
                }
                //强制更新
                this.$forceUpdate();
                //保存此次的值到oldSelect
                this.oldQuestion[index]=select;
            }
        }

    })
</script>
<style>
    .preview .el-col {
        font-weight: 600 !important;
    }

    .preview .el-radio__inner {
        border: 3px solid gray;
    }

    .select-preview .el-radio__label {
        display: none !important;
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 0 0 1.6rem 0;
        font-weight: 600;
        font-size: 100%
    }

    h1 {
        font-size: 1.5em
    }
</style>
